<template>
	<div class="inspection">
    <div class="information-item equipment-item inspection-item">
      <img  class="information-item-leftImg" src="../../assets/img/securityCheckImg/titledecoration.png" alt="">
      <div class="information-item-title">表具信息</div>
    </div>
    <div class="information-item">
      <div class="information-item-title">出场编号</div>
      <popup-picker class="information-item-input" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
      <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt="">
    </div>
    <div class="information-item">
      <div class="information-item-title">上次示数</div>
      <input class="information-item-input" type="text" maxlength="16" placeholder="请录入" value="890">
    </div>
    <div class="information-item">
      <div class="information-item-title">本次示数</div>
      <input class="information-item-input" type="text" maxlength="16" placeholder="请录入" value="">
      <img class="information-item-icon" src="../../assets/img/securityCheckImg/sao.png" alt="">
    </div>
    <div class="information-item">
      <div class="information-item-title">上次维修日期</div>
      <input class="information-item-input" type="text" maxlength="16" placeholder="请录入" value="890">
    </div>
    <div class="information-item">
      <div class="information-item-title">上次维修内容</div>
      <input class="information-item-input" type="text" maxlength="16" placeholder="请录入" value="890">
    </div>
    <div class="information-item equipment-item inspection-item">
      <img  class="information-item-leftImg" src="../../assets/img/securityCheckImg/titledecoration.png" alt="">
      <div class="information-item-title">检定情况</div>
    </div>
    <div class="information-item">
      <div class="information-item-title">检测类型</div>
      <popup-picker class="information-item-input" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
      <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt="">
    </div>
    <div class="information-item">
      <div class="information-item-title">检测形式</div>
      <popup-picker class="information-item-input" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
      <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt="">
    </div>
    <div class="entryContent-items">
      <div class="entryContent-item">
        <div class="entryContent-item-title">Qmax市值</div>
        <input class="entryContent-item-input" type="text" maxlength="16" placeholder="请录入" value="">
      </div>
      <div class="entryContent-item">
        <div class="entryContent-item-title">0.5Qmax市值</div>
        <input class="entryContent-item-input" type="text" maxlength="16" placeholder="请录入" value="">
      </div>
    </div>
    <div class="entryContent-items">
      <div class="entryContent-item">
        <div class="entryContent-item-title">0.25Qmax市值</div>
        <input class="entryContent-item-input" type="text" maxlength="16" placeholder="请录入" value="">
      </div>
      <div class="entryContent-item">
        <div class="entryContent-item-title">检定后市值</div>
        <input class="entryContent-item-input" type="text" maxlength="16" placeholder="请录入" value="">
      </div>
    </div>
    <div class="entryContent-items">
      <div class="entryContent-item">
        <div class="entryContent-item-title">瞬时流量</div>
        <input class="entryContent-item-input" type="text" maxlength="16" placeholder="请录入" value="">
      </div>
      <div class="entryContent-item">
        <div class="entryContent-item-title">温度</div>
        <input class="entryContent-item-input" type="text" maxlength="16" placeholder="请录入" value="">
      </div>
    </div>
    <div class="entryContent-items">
      <div class="entryContent-item">
        <div class="entryContent-item-title">压力</div>
        <input class="entryContent-item-input" type="text" maxlength="16" placeholder="请录入" value="">
      </div>
      <div class="entryContent-item">
        <div class="entryContent-item-title">电池电量</div>
        <input class="entryContent-item-input" type="text" maxlength="16" placeholder="请录入" value="">
      </div>
    </div>
    <div class="entryContent-items">
      <div class="entryContent-item inspection-popupPicker">
        <div class="entryContent-item-title">润滑油量</div>
        <div class="popupPicker-item">
          <popup-picker class="popupPicker-item-popup" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
          <!-- <img class="popupPicker-item-icon" src="../../assets/img/securityCheckImg/selectB.png" alt=""> -->
        </div>
        <!-- <input class="entryContent-item-input" type="text" maxlength="16" placeholder="请录入" value=""> -->
      </div>
      <div class="entryContent-item inspection-popupPicker">
        <div class="entryContent-item-title">流量计状态</div>
        <div class="popupPicker-item">
          <popup-picker class="popupPicker-item-popup" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
          <!-- <img class="popupPicker-item-icon" src="../../assets/img/securityCheckImg/selectB.png" alt=""> -->
        </div>
        <!-- <input class="entryContent-item-input" type="text" maxlength="16" placeholder="请录入" value=""> -->
      </div>
    </div>
    <div class="information-item">
      <div class="information-item-title">检定结果</div>
      <div class="information-item-radio information-item-input inspection-item-radio">
        <label class="information-item-radio-y">
          <input type="radio" name="radio1" value="0" @change="bindRadio">
          <img class="information-item-radio-icon" src="../../assets/img/securityCheckImg/unselected.png" alt="" v-if="radioShowY">
          <img class="information-item-radio-icon" src="../../assets/img/securityCheckImg/selected.png" alt="" v-else>
          <div class="information-item-radio-text">合格</div>
        </label>
        <label class="information-item-radio-n">
          <input type="radio" name="radio1" value="1" @change="bindRadio">
          <img class="information-item-radio-icon" src="../../assets/img/securityCheckImg/unselected.png" alt="" v-if="radioShowN">
          <img class="information-item-radio-icon" src="../../assets/img/securityCheckImg/selected.png" alt="" v-else>
          <div class="information-item-radio-text">不合格</div>
        </label>
      </div>
    </div>
    <div class="information-item equipment-item inspection-item">
      <img  class="information-item-leftImg" src="../../assets/img/securityCheckImg/titledecoration.png" alt="">
      <div class="information-item-title">检查明细</div>
    </div>
    <div class="equipment-checkbox">
      <label class="checkbox-label-item" v-for="(item,index) in checkboxList" :key="index">
        <input type="checkbox" name="checkbox" value="0" @change="bindCheckBox($event, item)">
        <img class="information-item-radio-icon" src="../../assets/img/securityCheckImg/unselected.png" alt="" v-if="item.checked">
        <img class="information-item-radio-icon" src="../../assets/img/securityCheckImg/selected.png" alt="" v-else>
        <div class="information-item-radio-text checkbox-label-item-text">{{item.value}}</div>
      </label>
    </div>
    <div class="information-item equipment-item inspection-item">
      <img  class="information-item-leftImg" src="../../assets/img/securityCheckImg/titledecoration.png" alt="">
      <div class="information-item-title">远传表信息</div>
    </div>
    <div class="information-item">
      <div class="information-item-title">读数</div>
      <input class="information-item-input" type="text" maxlength="16" placeholder="请录入" readonly value="张三">
    </div>
    <div class="information-item">
      <div class="information-item-title">电量/电压</div>
      <input class="information-item-input" type="text" maxlength="16" placeholder="请录入" readonly value="张三">
    </div>
    <div class="information-item">
      <div class="information-item-title">状态</div>
      <popup-picker class="information-item-input" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
      <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt="">
    </div>
    <div class="information-item equipment-item inspection-item">
      <img  class="information-item-leftImg" src="../../assets/img/securityCheckImg/titledecoration.png" alt="">
      <div class="information-item-title">防盗装置信息</div>
      <img class="information-item-icon inspection-item-icon" src="../../assets/img/securityCheckImg/add.png" alt="">
    </div>
    <div class="information-item inspection-popupPicker">
      <div class="popupPicker-item">
        <popup-picker class="popupPicker-item-popup" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
        <!-- <img class="popupPicker-item-icon" src="../../assets/img/securityCheckImg/selectB.png" alt=""> -->
      </div>
      <input class="popupPicker-item-input" type="text" maxlength="16" placeholder="请录入" value="">
      <div class="popupPicker-item-image">
        <img class="popupPicker-item-saoIcon" src="../../assets/img/securityCheckImg/sao.png" alt="">
      <img class="popupPicker-item-delIcon" src="../../assets/img/securityCheckImg/deleteData.png" alt="">
      </div>
    </div>
    <div class="information-item inspection-popupPicker">
      <div class="popupPicker-item">
        <popup-picker class="popupPicker-item-popup" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
        <!-- <img class="popupPicker-item-icon" src="../../assets/img/securityCheckImg/selectB.png" alt=""> -->
      </div>
      <input class="popupPicker-item-input" type="text" maxlength="16" placeholder="请录入" value="">
      <div class="popupPicker-item-image">
        <img class="popupPicker-item-saoIcon" src="../../assets/img/securityCheckImg/sao.png" alt="">
      <img class="popupPicker-item-delIcon" src="../../assets/img/securityCheckImg/deleteData.png" alt="">
      </div>
    </div>
    <div class="information-item inspection-popupPicker">
      <div class="popupPicker-item">
        <popup-picker class="popupPicker-item-popup" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
        <!-- <img class="popupPicker-item-icon" src="../../assets/img/securityCheckImg/selectB.png" alt=""> -->
      </div>
      <input class="popupPicker-item-input" type="text" maxlength="16" placeholder="请录入" value="">
      <div class="popupPicker-item-image">
        <img class="popupPicker-item-saoIcon" src="../../assets/img/securityCheckImg/sao.png" alt="">
      <img class="popupPicker-item-delIcon" src="../../assets/img/securityCheckImg/deleteData.png" alt="">
      </div>
    </div>
    <div class="information-item inspection-popupPicker">
      <div class="popupPicker-item">
        <popup-picker class="popupPicker-item-popup" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
        <!-- <img class="popupPicker-item-icon" src="../../assets/img/securityCheckImg/selectB.png" alt=""> -->
      </div>
      <input class="popupPicker-item-input" type="text" maxlength="16" placeholder="请录入" value="">
      <div class="popupPicker-item-image">
        <img class="popupPicker-item-saoIcon" src="../../assets/img/securityCheckImg/sao.png" alt="">
      <img class="popupPicker-item-delIcon" src="../../assets/img/securityCheckImg/deleteData.png" alt="">
      </div>
    </div>
    <div class="information-item inspection-popupPicker">
      <div class="popupPicker-item">
        <popup-picker class="popupPicker-item-popup" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
        <!-- <img class="popupPicker-item-icon" src="../../assets/img/securityCheckImg/selectB.png" alt=""> -->
      </div>
      <input class="popupPicker-item-input" type="text" maxlength="16" placeholder="请录入" value="">
      <div class="popupPicker-item-image">
        <img class="popupPicker-item-saoIcon" src="../../assets/img/securityCheckImg/sao.png" alt="">
      <img class="popupPicker-item-delIcon" src="../../assets/img/securityCheckImg/deleteData.png" alt="">
      </div>
    </div>
	</div>
</template>

<script>
import { PopupPicker } from "vux";
import Vue from 'vue';
export default {
  data() {
    return {
      value1: ["居民"],
      title1: "手机机型",
      list1: [
        ["小米1", "iPhone1", "华为1", "情怀1", "三星1", "其他1", "不告诉你1"]
      ],
      radioShowY: false,
      radioShowN: true,
      checkboxList:[
        {
          value: '试火',
          checked: true,
        },
        {
          value: '检漏',
          checked: true,
        },
        {
          value: '更换滤网',
          checked: true,
        },
        {
          value: '换垫',
          checked: true,
        },
        {
          value: '调值',
          checked: true,
        },
        {
          value: '注油',
          checked: true,
        },
        {
          value: '盘试',
          checked: true,
        },
        {
          value: '更换电池',
          checked: true,
        },
        {
          value: '表脏',
          checked: true,
        },
        {
          value: '表卡',
          checked: true,
        },
        {
          value: '腐蚀',
          checked: true,
        },
        {
          value: '外观损坏',
          checked: true,
        },
        {
          value: '显示异常',
          checked: true,
        },
        {
          value: '宣传通知',
          checked: true,
        },
        {
          value: '其他',
          checked: true,
        }
      ]
    };
  },
  components: {
    PopupPicker
  },
  props: [],
  mounted() {
    //this.init();
  },
  watch: {},
  methods: {
    bindRadio(e) {
      console.log(e.target.value)
      if(e.target.value == 1) {
        Vue.set(this,'radioShowY',true)
        Vue.set(this,'radioShowN',false)
      }else{
        Vue.set(this,'radioShowY',false)
        Vue.set(this,'radioShowN',true)
      }
    },
    bindCheckBox(event, item) {
      item.checked = !event.target.checked
    },
    onChange(val) {
      console.log("val change", val);
    },
  }
};
</script>

<style scoped lang="less">
@import "../../assets/less/style.less";
</style>
<style>
@import "../../assets/less/vuxStyle.less";
</style>
